<template>
  <view class="rating-list">
    <uni-list>
      <uni-list-item
          v-for="(rating, index) in ratings"
          :key="index"
          :title="`评分: ${rating.ratingWbxqy} 星`"
          :note="formatDate(rating.dateWbxqy)"
          showArrow
          :to="`/pages/user/CarRequestManage/TripList?requestId=${rating.requestIdWbxqy}&showAdd=${false}`"
      >
        <!-- 自定义内容插槽 -->
        <template v-slot:body>
          <view style="display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between">
            <!-- 左侧图片 -->
            <view style="flex: 0 0 auto; margin-right: 10px;">
              <image :src="rating.imageUrlWbxqy" mode="widthFix" class="slot-image" style="width: 60px; height: 60px;"/>
            </view>

            <!-- 右侧评分和评论 -->
            <view style="flex: 1; display: flex; flex-direction: column; justify-content: space-between">
              <!-- 评分 -->
              <view style="margin-bottom: 5px;">
                <uni-rate v-model="rating.ratingWbxqy" :max="5" size="24" class="rating"/>
              </view>
              <!-- 评论 -->
              <view style="margin-bottom: 5px;">
                {{ rating.commentsWbxqy }}
              </view>
              <!-- 日期 -->
              <view style="color: #888; font-size: 12px;align-content:end">
                时间: {{ formatDate(rating.dateWbxqy) }}
              </view>
            </view>
          </view>
        </template>
      </uni-list-item>

    </uni-list>
  </view>
</template>

<script setup>
import {ref, onMounted} from 'vue';
import {listRating} from "../../api/ratingMG";

const ratings = ref();
// 获取历史评价数据
const fetchRatings = async () => {
  try {
    // 请替换为实际的获取用车申请数据的接口
    ratings.value = await listRating()
  } catch (error) {
    console.error('Failed to fetch car requests:', error)
  }
}

// 在组件挂载时获取数据
onMounted(() => {
  fetchRatings()
})
const formatDate = (dateString) => {
  const date = new Date(dateString);
  return date.toLocaleString();
};
</script>

<style scoped>
.rating-list {
  padding: 10px;
}

.comments-section {
  margin-top: 5px;
  font-size: 14px;
  color: #666;
}

.image-section {
  margin-top: 10px;
}

image {
  width: 100%;
  height: auto;
  border-radius: 5px;
}
</style>
